﻿
@{
    ViewData["Title"] = "Buttons";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-edit"></i>
                        Buttons
                    </h3>
                </div>
                <div class="card-body pad table-responsive">
                    <p>自定义的bt标签，有href属性自动生成a，否则生成button</p>
                    <table class="table table-bordered text-center">
                        <tr>
                            <th>效果</th>
                            <th>cshtml代码</th>
                            <th>生成的Html代码</th>
                            <th>备注</th>
                        </tr>
                        <tr>
                            <td><bt>默认按钮</bt></td>
                            <td class="bg-dark"><xmp><!bt>默认按钮</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt>默认按钮</bt></xmp></td>
                            <td>简单吧</td>
                        </tr>
                        <tr>
                            <td><bt color="Secondary" href="http://www.gitee.com" target="_blank">a标签</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Secondary" href="http://www.gitee.com" target="_blank">a标签</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt color="Secondary" href="http://www.gitee.com" target="_blank">a标签</bt></xmp></td>
                            <td>a标签</td>
                        </tr>
                        <tr>
                            <td><bt color="Success">Success</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Success">Success</!bt></xmp></td>
                            <td class="bg-dark"><xmp><bt color="Success">Success</bt></xmp></td>
                            <td>背景色Success，color枚举，有语法提示</td>
                        </tr>
                        <tr>
                            <td><bt color="Warning" size="Lg">大按钮</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Warning" size="Lg">大按钮</!bt></xmp></td>
                            <td class="bg-dark"><xmp><bt color="Warning" size="Lg">大按钮</bt></xmp></td>
                            <td>大按钮，size枚举值</td>
                        </tr>
                        <tr>
                            <td><bt color="Info" flat="false">我不喜欢圆角</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Info" flat="false">我不喜欢圆角</!bt></xmp></td>
                            <td class="bg-dark"><xmp><bt color="Info" flat="false">我不喜欢圆角</bt></xmp></td>
                            <td>默认方角，配置可改</td>
                        </tr>
                        <tr>
                            <td><bt color="Danger" outline="true">空心按钮</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Danger" outline="true">空心按钮</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt color="Danger" outline="true">空心按钮</bt></xmp></td>
                            <td>空心按钮，outline=true</td>
                        </tr>
                        <tr>
                            <td><bt color="Primary" block="true">Block</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Primary" block="true">Block</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt color="Primary" block="true">Block</bt></xmp></td>
                            <td>block,宽度100%</td>
                        </tr>
                        <tr>
                            <td><bt color="Warning" disabled="true" block="true">禁用</bt></td>
                            <td class="bg-dark"><xmp><!bt color="Warning" block="true" disabled="true">禁用</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt color="Warning" block="true" disabled="true">禁用</bt></xmp></td>
                            <td>disabled,禁用</td>
                        </tr>
                        <tr>
                            <td><bt type="Submit" bg="Success">提交按钮</bt></td>
                            <td class="bg-dark"><xmp><!bt type="Submit" bg="Success">提交按钮</!bt></xmp></td>
                            <td class="bg-dark"> <xmp><bt type="Submit" bg="Success">提交按钮</bt></xmp></td>
                            <td>submit提交，type枚举</td>
                        </tr>
                    </table>
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.col -->
    </div>
    <!-- ./row -->
    <hr />
    <h3 bg="Success" style="padding:10px;">AdminLTE的其它按钮样式</h3>
    <div class="row">
        <div class="col-md-6">
            <!-- Block buttons -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Block Buttons</h3>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-default btn-block">.btn-block</button>
                    <button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
                    <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
                </div>
            </div>
            <!-- /.card -->
            <!-- Horizontal grouping -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Horizontal Button Group</h3>
                </div>
                <div class="card-body table-responsive pad">
                    <p>
                        Horizontal button groups are easy to create with bootstrap. Just add your buttons
                        inside <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
                    </p>

                    <table class="table table-bordered">
                        <tr>
                            <th>Button</th>
                            <th>Icons</th>
                            <th>Flat</th>
                            <th>Dropdown</th>
                        </tr>
                        <!-- Default -->
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">Left</button>
                                    <button type="button" class="btn btn-default">Middle</button>
                                    <button type="button" class="btn btn-default">Right</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-default btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-default btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">1</button>
                                    <button type="button" class="btn btn-default">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- ./default -->
                        <!-- Info -->
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info">Left</button>
                                    <button type="button" class="btn btn-info">Middle</button>
                                    <button type="button" class="btn btn-info">Right</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info">1</button>
                                    <button type="button" class="btn btn-info">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /. info -->
                        <!-- /.danger -->
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger">Left</button>
                                    <button type="button" class="btn btn-danger">Middle</button>
                                    <button type="button" class="btn btn-danger">Right</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-danger btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger">1</button>
                                    <button type="button" class="btn btn-danger">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.danger -->
                        <!-- warning -->
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">Left</button>
                                    <button type="button" class="btn btn-warning">Middle</button>
                                    <button type="button" class="btn btn-warning">Right</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-warning btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-warning btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">1</button>
                                    <button type="button" class="btn btn-warning">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.warning -->
                        <!-- success -->
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success">Left</button>
                                    <button type="button" class="btn btn-success">Middle</button>
                                    <button type="button" class="btn btn-success">Right</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-success btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-success btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success">1</button>
                                    <button type="button" class="btn btn-success">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-success dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.success -->
                    </table>
                </div>
            </div>
            <!-- /.card -->

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Appended Buttons</h3>
                </div>
                <div class="card-body">
                    <strong>With dropdown</strong>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                Action
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </div>
                        <!-- /btn-group -->
                        <input type="text" class="form-control">
                    </div>
                    <!-- /input-group -->
                    <strong>Normal</strong>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <button type="button" class="btn btn-danger">Action</button>
                        </div>
                        <!-- /btn-group -->
                        <input type="text" class="form-control">
                    </div>
                    <!-- /input-group -->
                    <strong>Flat</strong>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control rounded-0">
                        <span class="input-group-append">
                            <button type="button" class="btn btn-info btn-flat">Go!</button>
                        </span>
                    </div>
                    <!-- /input-group -->
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <!-- split buttons box -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Split buttons</h3>
                </div>
                <div class="card-body">
                    <!-- Split button -->
                    <p class="mb-1">Normal split buttons:</p>

                    <div class="margin">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">Action</button>
                            <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-info">Action</button>
                            <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">Action</button>
                            <button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success">Action</button>
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning">Action</button>
                            <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                    </div>

                    <!-- flat split buttons -->
                    <p class="mt-3 mb-1">Flat split buttons:</p>

                    <div class="margin">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-flat">Action</button>
                            <button type="button" class="btn btn-default btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-info btn-flat">Action</button>
                            <button type="button" class="btn btn-info btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger btn-flat">Action</button>
                            <button type="button" class="btn btn-danger btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success btn-flat">Action</button>
                            <button type="button" class="btn btn-success btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning btn-flat">Action</button>
                            <button type="button" class="btn btn-warning btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                    </div>

                    <!-- Split button -->
                    <p class="mt-3 mb-1">Hoverable split buttons:</p>
                    <div class="margin">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">Action</button>
                            <button type="button" class="btn btn-default dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                        </div>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-info">Action</button>
                            <button type="button" class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">Action</button>
                            <button type="button" class="btn btn-danger dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success">Action</button>
                            <button type="button" class="btn btn-success dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning">Action</button>
                            <button type="button" class="btn btn-warning dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                                <span class="sr-only">Toggle Dropdown</span>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </button>
                        </div>
                    </div>


                </div>
                <!-- /.card-body -->
            </div>
            <!-- end split buttons box -->
        </div>
        <!-- /.col -->
        <div class="col-md-6">
            <!-- Application buttons -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Application Buttons</h3>
                </div>
                <div class="card-body">
                    <p>Add the classes <code>.btn.btn-app</code> to an <code>&lt;a></code> tag to achieve the following:</p>
                    <a class="btn btn-app">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <a class="btn btn-app">
                        <i class="fas fa-play"></i> Play
                    </a>
                    <a class="btn btn-app">
                        <i class="fas fa-pause"></i> Pause
                    </a>
                    <a class="btn btn-app">
                        <i class="fas fa-save"></i> Save
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-warning">3</span>
                        <i class="fas fa-bullhorn"></i> Notifications
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-success">300</span>
                        <i class="fas fa-barcode"></i> Products
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-purple">891</span>
                        <i class="fas fa-users"></i> Users
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-teal">67</span>
                        <i class="fas fa-inbox"></i> Orders
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-info">12</span>
                        <i class="fas fa-envelope"></i> Inbox
                    </a>
                    <a class="btn btn-app">
                        <span class="badge bg-danger">531</span>
                        <i class="fas fa-heart"></i> Likes
                    </a>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <!-- Vertical grouping -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Vertical Button Group</h3>
                </div>
                <div class="card-body table-responsive pad">

                    <p>
                        Vertical button groups are easy to create with bootstrap. Just add your buttons
                        inside <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
                    </p>

                    <table class="table table-bordered">
                        <tr>
                            <th>Button</th>
                            <th>Icons</th>
                            <th>Flat</th>
                            <th>Dropdown</th>
                        </tr>
                        <!-- Default -->
                        <tr>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-default">Top</button>
                                    <button type="button" class="btn btn-default">Middle</button>
                                    <button type="button" class="btn btn-default">Bottom</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-default btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-default btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-default">1</button>
                                    <button type="button" class="btn btn-default">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- ./default -->
                        <!-- Info -->
                        <tr>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-info">Top</button>
                                    <button type="button" class="btn btn-info">Middle</button>
                                    <button type="button" class="btn btn-info">Bottom</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-info"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-info">1</button>
                                    <button type="button" class="btn btn-info">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /. info -->
                        <!-- /.danger -->
                        <tr>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-danger">Top</button>
                                    <button type="button" class="btn btn-danger">Middle</button>
                                    <button type="button" class="btn btn-danger">Bottom</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-danger"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-danger btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-danger">1</button>
                                    <button type="button" class="btn btn-danger">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.danger -->
                        <!-- warning -->
                        <tr>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-warning">Top</button>
                                    <button type="button" class="btn btn-warning">Middle</button>
                                    <button type="button" class="btn btn-warning">Bottom</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-warning"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-warning btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-warning btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-warning">1</button>
                                    <button type="button" class="btn btn-warning">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.warning -->
                        <!-- success -->
                        <tr>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-success">Top</button>
                                    <button type="button" class="btn btn-success">Middle</button>
                                    <button type="button" class="btn btn-success">Bottom</button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-center"></i></button>
                                    <button type="button" class="btn btn-success"><i class="fas fa-align-right"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-left"></i></button>
                                    <button type="button" class="btn btn-success btn-flat">
                                        <i class="fas fa-align-center"></i>
                                    </button>
                                    <button type="button" class="btn btn-success btn-flat">
                                        <i class="fas fa-align-right"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group-vertical">
                                    <button type="button" class="btn btn-success">1</button>
                                    <button type="button" class="btn btn-success">2</button>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- /.success -->
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <!-- Radio Buttons -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Radio Button Group</h3>
                </div>
                <div class="card-body table-responsive pad">
                    <p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="options" id="option3" autocomplete="off"> Radio
                        </label>
                    </div>

                    <p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn bg-olive active">
                            <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
                        </label>
                        <label class="btn bg-olive">
                            <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                        </label>
                        <label class="btn bg-olive">
                            <input type="radio" name="options" id="option3" autocomplete="off"> Radio
                        </label>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /. row -->
</div>